<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目编辑</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
</head>

<body>
    <div class="layui-container" style="margin-top: 20px;">
        <!-- 页面头部 -->
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="btnBack">
                                    <i class="layui-icon layui-icon-left"></i> 返回
                                </button>
                                <span style="margin-left: 10px; font-size: 16px; font-weight: bold;">项目编辑</span>
                            </div>
                            <div class="layui-col-md6" style="text-align: right;">
                                <button type="button" class="layui-btn layui-btn-primary" id="btnCancel">取消</button>
                                <button type="button" class="layui-btn" id="btnSave">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 项目基础信息 -->
        <div class="layui-row" style="margin-top: 20px;">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-form"></i> 项目基础信息
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form" lay-filter="projectBasicForm">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">项目名称 <span style="color: red;">*</span></label>
                                        <div class="layui-input-block">
                                            <input type="text" name="projectName" required lay-verify="required"
                                                placeholder="请输入项目名称" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">项目简称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="projectShortName" placeholder="请输入项目简称"
                                                class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">所属区域 <span style="color: red;">*</span></label>
                                        <div class="layui-input-block">
                                            <select name="region" lay-verify="required">
                                                <option value="">请选择区域</option>
                                                <option value="华东区域">华东区域</option>
                                                <option value="华南区域">华南区域</option>
                                                <option value="华北区域">华北区域</option>
                                                <option value="华中区域">华中区域</option>
                                                <option value="西南区域">西南区域</option>
                                                <option value="西北区域">西北区域</option>
                                                <option value="东北区域">东北区域</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">服务区域</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="serviceArea" placeholder="请输入服务区域"
                                                class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">合同名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="contractName" placeholder="请输入合同名称"
                                                class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">项目状态</label>
                                        <div class="layui-input-block">
                                            <select name="projectStatus">
                                                <option value="planning">规划中</option>
                                                <option value="active">进行中</option>
                                                <option value="completed">已完成</option>
                                                <option value="suspended">暂停</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">项目描述</label>
                                <div class="layui-input-block">
                                    <textarea name="projectDescription" placeholder="请输入项目描述" class="layui-textarea"
                                        rows="3"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 项目成员管理 -->
        <div class="layui-row" style="margin-top: 20px;">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <i class="layui-icon layui-icon-user"></i> 项目成员管理
                            </div>
                            <div class="layui-col-md6" style="text-align: right;">
                                <button type="button" class="layui-btn layui-btn-sm" id="btnAddMember">
                                    <i class="layui-icon layui-icon-add-1"></i> 添加成员
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="memberList">
                            <div class="layui-empty">
                                <div class="layui-empty-icon">
                                    <i class="layui-icon layui-icon-user"></i>
                                </div>
                                <p class="layui-empty-text">暂无项目成员</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 路口区域绑定 -->
        <div class="layui-row" style="margin-top: 20px;">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <i class="layui-icon layui-icon-location"></i> 路口区域绑定
                            </div>
                            <div class="layui-col-md6" style="text-align: right;">
                                <button type="button" class="layui-btn layui-btn-sm" id="btnBindRegion">
                                    <i class="layui-icon layui-icon-add-1"></i> 绑定区域
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="regionList">
                            <div class="layui-empty">
                                <div class="layui-empty-icon">
                                    <i class="layui-icon layui-icon-location"></i>
                                </div>
                                <p class="layui-empty-text">暂无绑定区域</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加成员表单模板 -->
    <script type="text/html" id="tplMemberForm">
        <form class="layui-form" lay-filter="memberForm" style="padding: 16px 24px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label">成员类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="memberType" value="existing" title="现有用户" checked>
                    <input type="radio" name="memberType" value="new" title="新增用户">
                </div>
            </div>
            <div class="layui-form-item" id="existingUserSection">
                <label class="layui-form-label">选择用户</label>
                <div class="layui-input-block">
                    <select name="userId" lay-search>
                        <option value="">请选择用户</option>
                        <!-- 用户选项将通过JS动态加载 -->
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="newUserSection" style="display: none;">
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" placeholder="请输入用户姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">项目角色</label>
                <div class="layui-input-block">
                    <select name="projectRole" lay-verify="required">
                        <option value="">请选择角色</option>
                        <option value="manager">项目经理</option>
                        <option value="developer">开发人员</option>
                        <option value="tester">测试人员</option>
                        <option value="designer">设计师</option>
                        <option value="analyst">分析师</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">加入时间</label>
                <div class="layui-input-block">
                    <input type="text" name="joinDate" id="joinDate" placeholder="请选择加入时间" class="layui-input">
                </div>
            </div>
        </form>
    </script>

    <!-- 绑定区域表单模板 -->
    <script type="text/html" id="tplRegionForm">
        <form class="layui-form" lay-filter="regionForm" style="padding: 16px 24px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label">区域类型</label>
                <div class="layui-input-block">
                    <select name="regionType" lay-verify="required">
                        <option value="">请选择区域类型</option>
                        <option value="intersection">路口</option>
                        <option value="road">道路</option>
                        <option value="area">区域</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">区域名称</label>
                <div class="layui-input-block">
                    <input type="text" name="regionName" required lay-verify="required" 
                           placeholder="请输入区域名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">区域代码</label>
                <div class="layui-input-block">
                    <input type="text" name="regionCode" placeholder="请输入区域代码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">绑定时间</label>
                <div class="layui-input-block">
                    <input type="text" name="bindDate" id="bindDate" placeholder="请选择绑定时间" class="layui-input">
                </div>
            </div>
        </form>
    </script>

    <script src="./layui/layui.js"></script>
    <script src="./js/project_edit.js"></script>
</body>

</html>